<template>
  <div>
    <div class="block_item" v-for="(item,index) in dataList">
      <img class="cover" @click="toAreaDetail(item.site.id)" :src="item.site.siteImages[0].siteImageUrl"/>
      <template v-if="$i18n.locale==='zh_cn'">
        <div class="text">
          <p class="title"><span @click="toAreaDetail(item.site.id)">{{item.site.site_name}}</span><img  src="../../../static/img/erji.png"/></p>
          <p class="dec" style="display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:pre-wrap;" @click="toAreaDetail(item.site.id)">{{item.site.site_description.trim()}}</p>
          <p class="action clearfix" v-if="showAction">
          <span :class="[{'on':item.zanStatus},'zan_bg']" @click="zan(item,item.site.id)">
            {{item.site.zan_count}}
          </span>
            <span :class="[{'on':item.storeStatus},'save_bg']" @click="save(item,item.site.id)">
            {{item.site.store_count}}
          </span>
          </p>
        </div>
      </template>
      <template v-else>
        <div class="text">
          <p class="title"><span @click="toAreaDetail(item.site.id)">{{item.site.site_name_en}}</span><img  src="../../../static/img/erji.png"/></p>
          <p class="dec" style="display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:pre-wrap;" @click="toAreaDetail(item.site.id)">{{item.site.site_description_en.trim()}}</p>
          <p class="action clearfix" v-if="showAction">
          <span :class="[{'on':item.zanStatus},'zan_bg']" @click="zan(item,item.site.id)">
            {{item.site.zan_count}}
          </span>
            <span :class="[{'on':item.storeStatus},'save_bg']" @click="save(item,item.site.id)">
            {{item.site.store_count}}
          </span>
          </p>
        </div>
      </template>

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { MessageBox } from 'mint-ui';
  export default {
    name: "spotList",
    props:['dataList','showAction'],
    data(){
      return{

      }
    },
    methods:{
      //进入景点详情
      toAreaDetail(i){
        this.$router.push('/areaDetail?id='+i+'');

      },
      //点赞
      zan( i,siteId){
        let that = this;
        if( !i.zanStatus ){
          that.action(siteId,'index/insertZan',function(){
            i.zanStatus = true;
            i.site.zan_count+=1;
          });
        }else{
          MessageBox.confirm('确定取消赞?').then(action => {
            that.action(siteId,'index/deleteZan',function(){
              i.zanStatus = false;
              i.site.zan_count-=1;
            });
          }).catch(()=>{});
        }
      },
      //收藏
      save( i,siteId){
        let that = this;
        if( !i.storeStatus ){
          that.action(siteId,'index/insertStore',function(){
            i.storeStatus = true;
            i.site.store_count+=1;
          });
        }else{
          MessageBox.confirm('确定取消收藏?').then(action => {
            that.action(siteId,'index/deleteStore',function(){
              i.storeStatus = false;
              i.site.store_count-=1;
            });
          }).catch(()=>{});
        }
      },
      action(siteId,url,fn){
        this.$axios.get(this.$store.state.apiUrl+url,{
          params:{
            user_id:sessionStorage.getItem('userId'),
            site_id:siteId
          }
        })
          .then(function (res) {
            fn();
          })
          .catch(function (error) {
            console.log('操作失败');
          });
      }
    },
    mounted(){

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .has_header
    padding-top 44px;
    height 100vh
    background #FAFAFA
  .main_scroll
    height 100%
    overflow auto
    padding-top 0.2rem
</style>
